<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="getData"
        :alert="true"
        :showPagination="true"
        :rowKey="(record) => record.code"
        :rowSelection="null"
      >
        <span slot="materialModelNumber" slot-scope="text, record">
          {{ record.material ? record.material.materialModelNumber : '' }}
        </span>
        <!-- <span slot="image" slot-scope="text">
							<image-preview :images="text" />
            </span> -->
						<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
      </s-table>
    
    </a-card>
  </a-modal>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";

import {STable} from '@/components'
import {page} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'


@Component({
  components: {
    STable,
  }
})
export default class BackStoreRecordCompletedModal extends Vue {
  @Ref() readonly table!: any
  
  visible = false
  title = '退库记录'
  confirmLoading = false
  // 查询参数
  queryParam = {
    sourceOrderMaterialId: '',
    materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.packing.id
  }
  columns = [
    {
      align: 'center',
      title: '序号', width: '80px',
      dataIndex: '',
      customRender(text: any, record, index: number) {
        return `${index + 1}`
      }
    },
    {
      title: '订单单号',
      dataIndex: 'orderNumber'
    },
    {
      title: '物料编号',
      dataIndex: 'materialCode'
    },
    
    {
      title: '物料名称',
      dataIndex: 'materialName'
    }, {
      title: '规格',
      dataIndex: 'materialModelNumber',
      scopedSlots: {customRender: 'materialModelNumber'}
    }, {
      title: '图片',
      dataIndex: 'image',
      scopedSlots: {customRender: 'image'}
    }, {
      title: '关联单号',
      dataIndex: 'ckOrderNumber'
    }, {
      title: '退库数量',
      dataIndex: 'number'
    },
    {
      title: '入库时间',
      dataIndex: 'createTime'
    },
  ]
  
  
  emsOrder = {}
  
  
  getData(parameter: { pageNo: number, pageSize: number }) {
    const params = {
      ...parameter,
      ...this.queryParam,
      planOrderType: 1,
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    this.queryParam.sourceOrderMaterialId = record.orderMaterialId
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  handleSubmit() {
    this.visible = false
  }
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
